
    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    /*input插件*/
    var INPUT = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {           
            if (this.props.defaultValue != "") {
                console.info("默认值")
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 140)
            this.setState({"value": value});
        },
        handleBlur: function () {
          this.props.setFormValue({"name": this.props.name, "value": this.state.value});
          this.props.handleBlur(this.state.value.replace(/(^\s*)|(\s*$)/g, ""));

        },
        handleFocus: function() {
            this.props.handleFocus&&this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            //console.log("加载input")
            return (
                <div className="virtual-input">
                    <input
                        placeholder={this.props.placeholder}
                        type="text"
                        className="input input-normal"
                        value={value}
                        defaultValue={this.props.defaultValue}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus || null}
                        onBlur={this.handleBlur}
                    />
                </div>
            )
        }
    });

    /*input label插件*/
    var INPUT_LABEL = React.createClass({
        propTypes: {
            subTitle: React.PropTypes.string.isRequired
        },
        getInitialState: function () {
            return {value: ''};
        },
        componentWillMount: function () {
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        getDefaultProps: function () {
            return {
                subTitle: "大哥INPUT_LABEL的subTitle 没设置值"
            };
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 140)
            this.setState({"value": value});
        },
        handleBlur: function () {
            //console.log("失去焦点")
            this.props.setFormValue({"name":this.props.name,value:this.state.value.replace(/(^\s*)|(\s*$)/g, "")});
            this.props.handleBlur(this.state.value.replace(/(^\s*)|(\s*$)/g, ""));
        },
        handleFocus: function () {
            this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            return (
                <div className="virtual-input-label">
                    <input
                        placeholder={this.props.placeholder}
                        type="text" value={value}
                        defaultValue={this.props.defaultValue}
                        className="input input-normal"
                        onChange={this.handleChange}
                        onBlur={this.handleBlur}
                        onFocus={this.handleFocus}
                    />
                    <label>{this.props.subTitle}</label>
                </div>
            )
        }
    });

    /*textarea插件*/
    var TEXTAREA = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 2000)
            this.setState({"value": value});

        },
        handleBlur: function () {
            //console.log("失去焦点");
            //this.props.setFormValue({"name":this.props.name,value:this.state.value});
            this.props.setFormValue({"name": this.props.name, "value": this.state.value});
            this.props.handleBlur(this.state.value);
        },
        handleFocus: function () {
            this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            return (
                <div className="virtual-textarea">
                    <textarea
                        placeholder={this.props.placeholder}
                        className="textarea"
                        value={value}
                        rows="5"
                        onChange={this.handleChange}
                        onBlur={this.handleBlur}
                        onFocus={this.handleFocus}
                    >
                    </textarea>
                </div>
            )
        }
    });

    var SPAN = React.createClass({
        getDefaultProps: function () {
            return {
                defaultValue: ""
            }
        },
        render: function () {
            return (
                <span>{this.props.defaultValue}</span>
            )
        }
    });

     var LABEL = React.createClass({
        getDefaultProps: function () {
            return {
                defaultValue: ""
            }
        },
        render: function () {
            return (
                <span>{this.props.defaultValue}</span>
            )
        }
    });
    var LABEL_REMARK = React.createClass({
        getDefaultProps: function () {
            return {
                defaultValue: ""
            }
        },
        render: function () {
            return (
                <span className="label-remark" title={this.props.defaultValue}>{this.props.defaultValue}</span>
            )
        }
    });


       /*input插件*/

    var INPUTMLEAVE = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {
            // componentWillUpdate:function(){
            //console.error("...." + this.props.defaultValue)
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            this.props.handleBlur(event.target.value);
            var value = event.target.value.substr(0, 140)
            this.setState({"value": value});


        },
        handleBlur: function () {
            //console.log("失去焦点")
            this.props.setFormValue({"name": this.props.name, "value": this.state.value});
            this.props.handleBlur(this.state.value);
        },
        handleFocus: function() {
            this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            //console.log("加载input")
            return (
                <div className="virtual-input"  >
                    <input
                        placeholder={this.props.placeholder}
                        type="text"
                        className="input input-normal"
                        value={value}
                        defaultValue={this.props.defaultValue}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                    />
                </div>
            )
        }
    });

    var INPUT_DISPLAY = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {
            // componentWillUpdate:function(){
            //console.error("...." + this.props.defaultValue)
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
        },
        componentDidUpdate:function(){

        },
        componentWillReceiveProps:function(nextProps){
            if(nextProps.defaultValue!=this.props.defaultValue){
                this.props.setFormValue({"name": this.props.name, "value": nextProps.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
            return true;
        },
        handleBlur: function () {
            //console.log("失去焦点")
        },
        handleFocus: function() {
            this.props.handleFocus();
        },
        render: function () {
            var value = this.props.defaultValue;
            return (
                <div className="virtual-input">
                    <input
                        placeholder={this.props.placeholder}
                        type="text"
                        className="input input-normal"
                        value={this.props.defaultValue}
                        defaultValue={this.props.defaultValue}
                        onChange={this.handleChange}
                        onBlur={this.handleBlur}
                        onFocus={this.handleFocus}
                    />
                </div>
            )
        }
    });


    var SEARCH = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 140)
            this.setState({"value": value});
        },
        handleBlur: function () {        
            console.info("查询   失去焦点  ")  
            this.props.handleBlur(this.state.value);
            this.props.setFormValue({"name": this.props.name, "value": this.state.value.replace(/(^\s*)|(\s*$)/g, "")});
        },
         // 绑定键盘回车事件，添加新任务
        handlerKeyUp:function(event){
            
            if(event.keyCode === 13){
                let value = event.target.value.replace(/(^\s*)|(\s*$)/g, "");
                this.props.setFormValue({"name": this.props.name, "value": value});                
                this.props.onKeyUp&&this.props.onKeyUp(value);
            }
        },
        handleFocus: function() {
            this.props.handleFocus&&this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            //console.log("加载input")
            return (
                <div className="virtual-input">
                    <input
                        placeholder={this.props.placeholder}
                        type="text"
                        className="input input-normal"
                        value={value}
                        defaultValue={this.props.defaultValue}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus || null}
                        onBlur={this.handleBlur}
                        onKeyUp={this.handlerKeyUp}
                    />
                </div>
            )
        }
    });

    var INPUTEDITNUM = React.createClass({
        getInitialState: function () {
            return {value: ''};
        },
        getDefaultProps: function () {
            return {
                getDefaultProps: ""
            }
        },
        componentWillMount: function () {
            // componentWillUpdate:function(){
            //console.error("...." + this.props.defaultValue)
            if (this.props.defaultValue != "") {
                this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
                this.props.handleBlur(this.props.defaultValue);
                this.setState({
                    value: this.props.defaultValue
                })
            }
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 140)
            this.setState({"value": value});
            this.props.setFormValue({"name": this.props.name, "value": value});
            this.props.handleBlur(value);

        },
        handleBlur: function () {
            //console.log("失去焦点")
            this.props.setFormValue({"name": this.props.name, "value": this.state.value});
            this.props.handleBlur(this.state.value);
        },
        handleFocus: function() {
            this.props.handleFocus();
        },
        render: function () {
            var value = this.state.value;
            //console.log("加载input")
            return (
                <div className="virtual-input"  >
                    <input
                        placeholder={this.props.placeholder}
                        type="text"
                        className="input input-normal"
                        value={value}
                        defaultValue={this.props.defaultValue}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                    />
                </div>
            )
        }
    });

    module.exports =  {
        INPUT: INPUT,
        INPUT_LABEL: INPUT_LABEL,
        TEXTAREA: TEXTAREA,
        SPAN:SPAN,
        LABEL:LABEL,
        INPUTMLEAVE:INPUTMLEAVE,
        INPUT_DISPLAY:INPUT_DISPLAY,
        SEARCH:SEARCH,
        LABEL_REMARK:LABEL_REMARK,
        INPUTEDITNUM:INPUTEDITNUM
    }
